<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06-搜索</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/search.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/06-search.js"></script>
</head>


<body>
    <!-- header部分 -->
    <header>
        <div class="back">
            <!-- <img src="./images/返回钮.png" alt=""> -->
        </div>
        <input type="text" class="search" placeholder='橙子'>

        <div class="message">
        </div>
        <div class="setting">
            <img src="./images/菜单—点.png" alt="">
        </div>
        <div class="caidan">
            <ul>
                <li class="to_index">首页</li>
                <li class="to_shoppingcar">购物车</li>
                <li class="to_mylist">我的订单</li>
                <li class="to_recommend">每日推荐</li>
            </ul>
        </div>

    </header>
    <!-- header部分 -->


    <!-- nav部分 -->
    <nav>
        <ul class="main">
            <li class="moren focus">
                <span>默认排序</span>
            </li>
            <li class="yh">
                <span>优惠</span>
                <img src="./images/箭头.png" alt="">
            </li>
            <li class="xl">
                <span>销量</span>
                <img src="./images/箭头.png" alt="">
            </li>
            <li class="price">
                <span>价格</span>
                <img src="./images/箭头.png" alt="">
            </li>
            <li class="shaixuan">
                <span>筛选</span>
                <img src="./images/多边形.png" alt="">
            </li>
        </ul>
        <div class="shitu ">
            <img src="./images/视图按钮.png" alt="">
        </div>
        <!-- 筛选框 -->

        <div class="box">
            <div class="choice">
                <span class="one">规格</span>
                <ul class="sx">
                    <li><span>全部</span></li>
                    <li><span>0.2-0.5kg</span></li>
                    <li><span>0.5-1kg</span></li>
                    <li><span>1kg+</span></li>
                </ul>
            </div>
            <div class="choice">
                <span class="one">特点</span>
                <ul class="sx">
                    <li><span>全部</span></li>
                    <li><span>甜口橙子</span></li>
                    <li><span>咸口橙子</span></li>
                    <li><span>酸口橙子</span></li>
                </ul>
            </div>
            <div class="choice">
                <span class="one">评价</span>
                <ul class="sx">
                    <li><span>全部</span></li>
                    <li><span>甜的牙疼</span></li>
                    <li><span>咸的牙疼</span></li>
                    <li><span>酸的牙疼</span></li>
                    <li><span>硌的牙疼</span></li>
                </ul>
            </div>
            <input type="submit" value="确定" id="confirm">
            <!-- <span>销量</span> -->
        </div>
    </nav>
    <!-- nav部分 -->

    <!-- 内容部分 -->

    <!-- 设置一个div用于放在产品列表前面 -->
    <div class="kongbai">

    </div>
    <!-- 块区域展示 -->
    <section class="block">
        <div class="result">
            <div class="top">
                <img src="./images/shop_icon.png" alt="">
                <p>千库水果商店</p>
                <span> > </span>
            </div>
            <div class="middle">
                <img src="./images/橙子-03.png" alt="">
            </div>
            <div class="bottom">
                <h4>新鲜水嫩夏橙</h4>
                <p class="mass">
                    <span>500g</span>
                </p>
                <div class="youhui">
                    <span>限时促销</span>
                </div>
                <div class="price_now">
                    <span>&yen;</span><span>22.00</span>
                    <p>&yen;<del>31.50</del></p>
                    <div class="add_goods">
                        <!-- <span>+</span> -->
                        +
                    </div>
                </div>
            </div>
        </div>
        <div class="blank_result"></div>
    </section>
    <!-- 行区域展示 -->
    <section class="line active">
        <div class="res">
            <div class="left">
                <img src="./images/橙子-03.png" alt="">
            </div>
            <div class="right">
                <div class="line_1">
                    <h4>新鲜水嫩夏橙</h4>
                </div>
                <div class="line_2">
                    <p class="mass">
                        <span>500g</span>
                    </p>
                    <div class="youhui">
                        <span>限时促销</span>
                    </div>
                </div>
                <div class="line_3">
                    <span>&yen;22.00</span>
                    <p>&yen;<del>31.50</del></p>
                </div>
                <div class="line_4 ">
                    <img src="./images/shop_icon.png" alt="">
                    <p class="top">千库水果商店</p>
                    <span class="add_goods">+</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 内容部分 -->


</body>


</html>